import React from 'react';
import './index.less';
import PropTypes from 'prop-types';
import CommonHeader from 'COMPONENT/CommonHeader';
import { List, Button ,Picker, InputItem } from 'antd-mobile';
const ListItem = List.Item;


const paymentWay = [
    {value:'全部提前还款',label:'全部提前还款'},
    {value:'部分提前还款',label:'部分提前还款'},
]


class HmdMain extends React.Component { 
    static contextTypes = {
        router: PropTypes.object.isRequired
    }
    constructor(props){ 
        super(props);

        this.state={ 
            hmdData:{
               type:paymentWay[0].value,
               momey:'12342.00',
            },
        }
    }

    componentDidMount(){ 
        //初始化
    }

    //提交数据
    btnClick=()=>{ 
        //跳转下个页面
        // this.context.router.push({
		// 	pathname: '/HmdMain/HmdMainTools'
        // })
    }

    setData=(val,str)=>{ 
        let data;
        if(str=="way"){ 
            data = Object.assign(this.state.hmdData,{type:val[0]});
        }else if(str=="money"){ 
            data = Object.assign(this.state.hmdData,{money:val[0]});
        }
        this.setState({ 
            hmdData:data,
        })
    }

    render() {
        
        return (
            <div className="mine_loan_prepay">
           		<CommonHeader 
					name='提前还款'					
					leftContentTitle="@back" 
					leftContent='返回'
				/>
				<div style={{height:'.9rem'}}></div>

                <div className="hmd_apply_middle">
                    <InputItem
                        type="digit"
                        defaultValue={123543}
                        onChange={val=>this.setData(val,'money')}
			          >提前款款金额</InputItem>
                    <Picker 
						data={paymentWay}
						extra = {this.state.hmdData.type}
						cols="1"  
						onOk = {val=>this.setData(val,'way')}
					>
			          <ListItem arrow="horizontal" >提前还款方式</ListItem> 
			        </Picker>
                    <div className="hmd_apply_middle_info">
                        <div className="hmd_apply_middle_info_down">
                            <div> 
                                <span>提前还款预览</span>
                                <span></span>
                            </div>
                            <div> 
                                <span>结果提示</span>
                                <span>{this.state.hmdData.endDate}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="hmd_apply_btn">
                    <Button type="primary" inline className="form_btn" onClick={this.btnClick}>确认</Button>
                </div>
            </div>
        );
    }
}
export default HmdMain;